<template>
  <div class="box w1200">
    <div class="perTopBox betweens">
      <div class="perLeft betweens">
        <div class="perImg1">
          <img src="../../assets/img/headPortrait.png" alt="">
        </div>
        <div>
          <div class="perText1">用户昵称</div>
          <div class="perText2">个人介绍：暂无</div>
        </div>
      </div>
      <div>
        <el-button type="primary" size="small" @click="editInfo">{{isEditInfo?'个人中心':'编辑资料'}}</el-button>
        <el-button type="primary" size="small" @click="backHome">返回首页</el-button>
      </div>
    </div>
    <div class="typeGroup">
      <div style="font-size:18px;" v-if="isEditInfo">编辑资料</div>
      <div v-else>
        <div class="typeList" v-for="(item,index) in typeList" :key="index" @click="typeGroupClick(index)">
          <el-button v-if="index!==4||msgNum===0" :type="typeGroupIndex==index?'primary':'text'" round size="mini">{{item}}</el-button>
          <el-badge v-else :value="msgNum" :max="99" class="item">
            <el-button :type="typeGroupIndex==index?'primary':'text'" round size="mini">{{item}}</el-button>
          </el-badge>
        </div>
      </div>
    </div>
    <div class="perConBox" v-if="isEditInfo">
      <editInfo></editInfo>
    </div>
    <div class="perConBox" v-else>
      <myCollection ref="scDzRef" v-if="typeGroupIndex===0" :type='2'></myCollection>
      <myCollection ref="scDzRef" v-if="typeGroupIndex===1" :type='1'></myCollection>
      <myFocus v-if="typeGroupIndex===2"></myFocus>
      <myService v-if="typeGroupIndex===3"></myService>
      <msgCenter v-if="typeGroupIndex===4"></msgCenter>
    </div>
  </div>
</template>
<script>
import { typeList } from './data.js'
// 我的收藏
import myCollection from './myCollection.vue'
// import myHelp from './myHelp.vue'
import myFocus from './myFocus.vue'
import myService from './myService.vue'
import msgCenter from './msgCenter.vue'
import editInfo from './editInfo.vue'
export default {
  data () {
    return {
      typeList,
      typeGroupIndex: 0,
      isEditInfo: false,
      msgNum: 0
    }
  },
  mounted () {
    window.scrollTo(0, 0)
  },
  created () {
    this.init()
    this.typeGroupClick(0)
  },
  components: {
    myCollection,
    // myHelp,
    myFocus,
    myService,
    msgCenter,
    editInfo
  },
  methods: {
    init () {
      this.typeGroupIndex = this.$route.query.type
      this.getMsgNum()
    },
    typeGroupClick (index) {
      this.typeGroupIndex = index
      if (index === 0 || index === 1) {
        this.$nextTick(() => {
          this.$refs.scDzRef.init()
        })
      } else if (index === 4) {
        this.allRead()
      }
    },
    // 点击编辑资料
    editInfo () {
      this.isEditInfo = !this.isEditInfo
    },
    // 返回首页
    backHome () {
      this.$router.push({
        name: 'index'
      })
    },
    // 查看
    getMsgNum (row) {
      this.$http.get(`/xnkt/tbnewsuser/unread`).then(({ data: res }) => {
        if (res.code !== 0) {
          return false
        }
        this.msgNum = res.data
      }).catch(() => {})
    },
    // 全部已读
    allRead () {
      this.$http.get(`/xnkt/tbnewsuser/allLabelRead`).then(({ data: res }) => {
        if (res.code !== 0) {
          return false
        }
        this.getDataList(1)
      }).catch(() => {})
    }
  }
}
</script>
<style lang="scss" src="./index.scss" scoped></style>
